<style scoped lang="less">
    @import "JobManage";
</style>
<template>
    <div class="job-manage">
        <header-title :title="'职位管理'">
            <p slot="header-link">
                <i class="el-icon-edit-outline" @click="goPage('publish-job')">发布职位</i>
            </p>
        </header-title>
        <div class="content">
            <ul class="tab-list">
                <li
                        v-for="(item, index) in tabList"
                        :key="index+'tab'"
                        class="tab-item"
                        :class="(currentTabName===index?'active':'')"
                        @click="currentTabName=index"
                >{{item.name}}（{{item.num}}）</li>
            </ul>
            <ul class="job-list">
                <li v-for="(item, index) in recommendsList" :key="index+'tal'">
                    <el-checkbox class="check fl" v-model="item.checked" @change="checkItem"></el-checkbox>
                    <div class="detail fl">
                        <div class="job-name">
                            <span class="name">{{item.name}}</span>
                            <span class="salary">{{item.salary}}</span>
                        </div>
                        <div class="job-detail">
                            <span>{{item.detail.address}}</span>
                            <span>{{item.detail.experience}}</span>
                            <span>{{item.detail.Education}}</span>
                            <span>{{item.detail.num}}</span>
                        </div>
                    </div>
                    <div class="collect fr">
                        <div class="collect-icon">
                            <div class="el-icon-delete btn fr"></div>
                            <div class="el-icon-edit-outline btn fr" style="margin-right: 10px"></div>
                        </div>
                        <div class="update"><i class="el-icon-time" style="margin-right: 7px"></i>2019-04-25</div>
                    </div>
                </li>
                <li>
                    <el-checkbox style="margin-right: 11px" v-model="checkedAll" @change="checkAll">
                        全选
                    </el-checkbox>
                    <span class="link batch-delete">删除所选</span>
                </li>
            </ul>
        </div>
        <div class="footer">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="200">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import EnterpriseAside from '@/pages/enterprise-center/components/EnterpriseAside.vue'
    import HeaderTitle from '@/pages/enterprise-center/components/HeaderTitle.vue'

    export default {
        name: "JobManage",
        components: {
            EnterpriseAside,
            HeaderTitle
        },
        data() {
            return {
                checkedAll: false,
                currentTabName: 0,
                checkList: [],
                tabList: [
                    {
                        name: '发布中',
                        num: '0',
                    }, {
                        name: '审核中',
                        num: '0',
                    },{
                        name: '已暂停',
                        num: '0',
                    },{
                        name: '未通过',
                        num: '0',
                    }
                ],
                recommendsList: [
                    {
                        name: '高中数学老师',
                        salary: '5K-10K',
                        detail: {
                            address: '广州惠州',
                            experience: '3-5年',
                            Education: '硕士',
                            num: '2人'
                        },
                        company: '惠州市综合高级中学',
                        update: '2019-04-30',
                        src: '../../../assets/images/图层01.png',
                        checked: false
                    },{
                        name: '高中数学老师',
                        salary: '5K-10K',
                        detail: {
                            address: '广州惠州',
                            experience: '3-5年',
                            Education: '硕士',
                            num: '2人'
                        },
                        company: '惠州市综合高级中学',
                        update: '2019-04-30',
                        src: '../../../assets/images/图层01.png',
                        checked: false
                    },{
                        name: '高中数学老师',
                        salary: '5K-10K',
                        detail: {
                            address: '广州惠州',
                            experience: '3-5年',
                            Education: '硕士',
                            num: '2人'
                        },
                        company: '惠州市综合高级中学',
                        update: '2019-04-30',
                        checked: false
                    },{
                        name: '高中数学老师',
                        salary: '5K-10K',
                        detail: {
                            address: '广州惠州',
                            experience: '3-5年',
                            Education: '硕士',
                            num: '2人'
                        },
                        company: '惠州市综合高级中学',
                        update: '2019-04-30',
                        checked: false
                    }
                ],
            }
        },
        methods: {
            checkAll() {
                this.recommendsList.forEach(item => {
                    item.checked = this.checkedAll;
                })
            },
            checkItem() {
                this.checkedAll = this.recommendsList.every(item=>{return item.checked})
            },
            goPage(name) {
                this.$router.push({name: name})
            }
        }
    }
</script>

